<template lang="pug">
div.div1
    CouLists(@getcousid="getcousid")
    el-form-item(v-for="(item, index) in Paycon" :key="item.key")
        label.el-form-item__label.inline 充值金额
            el-input(v-model="item.key" style="width:70%;margin-left:8px;")
        label.el-form-item__label 文字描述
            el-input(v-model="item.val" style="width:70%;margin-left:8px;")
        label.el-form-item__label 充值送劵
            el-input(v-model="item.couid" style="width:70%;margin-left:8px;" disabled)
            el-button(@click="getgood(index)") 选择优惠券
        el-button(@click="func(index)" type="danger" icon="el-icon-delete")
    el-form-item
        el-button.btn1(@click="plus" type="primary" icon="el-icon-edit") 添加参数 

</template>

<script>
import CouLists from 'components/Coupon/CouLists'
    export default{
        props:{
            Paycon:{
                type: Array,
                required: true,
                default: []
            }
        },
        data(){
            return{
                ItemIndex:-1
            }
        },
        components:{
            CouLists
        },
        watch:{
            'Paycon':{
                handler: function(val, oldval) {
                    this.$emit('Paycon-change', val)
                },
                deep: true
            }
        },
        methods:{
            plus(){
                var n = {key:'',val:'',couid:''}
                this.Paycon.push(n)
            },
            func(i){
                this.Paycon.splice(i,1)
            },
            getgood(i){
                this.ItemIndex=i
                this.$store.commit('ChangeCouLists')
            },
            getcousid(v){
                this.Paycon[this.ItemIndex].couid=v
            }
        }
    }
</script>
<style>
.inline{
    text-align: left !important;
    display: inline-flex !important;
}
.inline{
    margin-left: -50px !important;
}
.div1{
    margin-left: -14px;
}
.btn1{
    margin-left: 14px;
}
</style>

